<template>
	<view class="main-cont box box-tb">
		<view class="fixed" :style="{'z-index':zIndex}">
			<u-dropdown :border-bottom="true" @open="open" @close="close">
				<u-dropdown-item v-model="zyValue" :title="zyTitle" :options="zylist" @change="changeZy"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="stu-main task">
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox v-model="item.checked" v-for="(item, index) in bjlist" :key="index" :name="item.classid" label-disabled="false">
					<view class="list box box-align-center box-pack-between">
						<view class="name box box-align-start box-pack-start">
							<view class="ml10  box box-tb box-align-center box-pack-start">
								<view class="time">
									{{item.xj+"级"+item.zymc}}
								</view>
								<view class="titles">
									{{item.bjmc}}
								</view>
							</view>
						</view>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="btn box box-align-center box-pack-between">
			<u-checkbox v-model="checkAll" @change="checkedAll">全选</u-checkbox>
			<view class="box box-align-center box-pack-center">
				<view class="mr20" @click="goback()">
					取消
				</view>
				<view class="reset-confirm-btn" @click="sure()">
					发布
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom " border-radius="14" height="648rpx" :safe-area-inset-bottom="true">
			<view class="box box-align-center box-pack-between title">
				<view class="">
					发布实践任务
				</view>
			</view>
			<view class="" style="height: 400rpx;padding: 20rpx 40rpx;">
				<view class="box box-align-center">
					<view class="mr10">
						截止时间 ：
					</view>
					<view class="text box box-align-center box-pack-between" @click="timeShow = true">
						<view class="">
							{{timeVal}}
						</view>
						<u-icon name="clock" color="#626BF1"></u-icon>
					</view>
				</view>
			</view>
			<view class="box box-align-center box-pack-center">
				<view class="flex-1" @click="handleCancel()">
					取消
				</view>
				<view class="flex-2"  @click="disableBtn == false?handleConfirm():``">
					确定
				</view>
			</view>
		</u-popup>
		<u-picker v-model="timeShow" mode="time" :params="params" @confirm="timeConfirm" @cancel="timeCancel"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currSchool: uni.getStorageSync('currSchool'),
				disableBtn:false,
				classid: uni.getStorageSync('classid'),
				user: uni.getStorageSync("user"),
				plan: {},
				checkAll: false,
				selectId: [],
				show: false,
				timeShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: false,
				},
				timeVal:'',
				zIndex:0,
				zylist: [{
					label: '全部专业',
					value: ''
				}],
				zyValue: '',
				zyTitle: '全部专业',
				bjlist:[]
			};
		},
		mounted() {
			this.zyList();
			this.bjList('');
			this.getplan();
		},
		methods: {
			getplan() {
				this.$api.post({url: '/yteachplan/getplan'}, {schoolid: this.user.schoolId}).then(res => {
					this.plan = res.plan;
					console.log(this.plan)
				})
			},
			timeConfirm(e){
				this.timeVal = e.year+'-'+e.month+'-'+e.day
				this.show = true
			},
			timeCancel(){
				this.show = true
			},
			handleCancel(){
				this.show = false
			},
			handleConfirm(){
				this.disableBtn = true;
				let params = {
					planid: this.plan.id,
					trid: this.user.id,
					endTime:this.timeVal,
					classid: this.selectId,
					ldsjids: uni.getStorageSync('selectedids')
				};
				console.log(params)
				this.$api.post({url: '/yclassldsjtask/pubSjrw'}, {
					str: JSON.stringify(params)
				}).then(res => {
					if (res.code == '0') {
						this.show = false
						this.$refs.uToast.show({
							title: '发布成功',
							type: 'success',
							callback: (res => {
								this.goback()
							})
							
						})
					} else {
						this.disableBtn = false;
						this.$refs.uToast.show({
							title: '发布失败',
							type: 'error'
						})
					}
				})
			},
			//提交
			sure() {
				//提交选中的值
				if (this.selectId.length == 0) {
					this.$refs.uToast.show({
						title: '请选择实践任务',
						type: 'warning',
					})
					return;
				}
				this.show = true
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.selectId = e;
				if (e.length == this.bjlist.length) {
					this.checkAll = true
				} else {
					this.checkAll = false
				}
			},
			//全选
			checkedAll() {
				if (this.checkAll == false) {
					this.bjlist.map(val => {
						val.checked = true;
					})
					this.selectId = this.bjlist.map(val => {
						return val.classid
					})
				} else {
					this.bjlist.map(val => {
						val.checked = false;
					})
					this.selectId = []
				}

			},
			goback() {
				uni.navigateBack()
			},
			changeZy(e) {
            	if (e != '') {
					let _this=this;
					this.zylist.forEach( (item, index) => {
						   if(e==item.value){
							   _this.zyTitle=item.label;
							   this.bjList(item.value);
						   }
					   })
            	} else {
            		this.zyTitle = '全部专业';
            		this.zyValue = '';
				    this.bjList('');
            	}
            },
			open(){
				this.zIndex = 100000000
			},
			close(){
				this.zIndex =0
			},
			zyList() {
				this.$api.post({url: '/dzy/listZy'}, { schoolid: this.currSchool.id }).then(res => {
					for (let i = 0; i < res.list.length; i++) {
						this.zylist.push(res.list[i]);
					};
				})
			},
			bjList(zydm) {
				this.$api.post({url: '/dclass/listwithzyinfo'}, { schoolid: this.currSchool.id, zydm:zydm }).then(res => {
					this.bjlist=res.list;
					console.log(this.bjlist)
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.fixed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
	}
	
	.text {
		padding: 0 15rpx;
		width: 500rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #F8F9FC;
		border-radius: 8rpx;
		color: #AEB8CF;
		font-size: 28rpx;
	}
	.main-cont {
		width: 100%;
		height: 100%;

		.stu-main {
			box-sizing: border-box;
			width: 722rpx;
			height: 75%;
			overflow: scroll;
			margin: 20rpx auto 0;
			border-radius: 20px;
			padding-bottom: 200rpx;
			position: absolute;
			top: 35px;

			.top {
				padding: 0 40rpx;
				height: 98rpx;
				margin-bottom: 2rpx solid #F0F1F8;

			}

			.title {
				width: 100%;
				height: 107rpx;
			}
		}

		.number {
			font-size: 36rpx;
			font-weight: blod;
			color: #AEB8CF;
		}

		.list {
			padding: 0 40rpx;
			height: 100%;

			.titles {
				font-size: 28rpx;
				font-weight: bold;
				color: #181623;
			}

			.time {
				width: 100%;
				font-size: 26rpx;
				color: #888F9E;
			}
		}

		.check {
			width: 100rpx;
		}

		.sort {
			text-align: center;
			width: 100rpx;
		}

		.name {
			text-align: left;
			width: 430rpx;
		}

		.score {
			text-align: right;
			width: 202rpx;
			color: #7F84E4;
			font-size: 26rpx;
		}

		.btn {
			position: fixed;
			bottom: 0;
			padding: 0 40rpx;
			width: 100%;
			height: 200rpx;
			background-color: rgba(255, 255, 255, .9);

			.reset-confirm-btn {
				width: 213rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(180deg, #7686F6, #626BF1);
				box-shadow: 0px 2rpx 10rpx 0px #DADCE8;
				border-radius: 31rpx;
				font-size: 30rpx;
				font-weight: 600;
				text-align: center;
				color: #fff;
			}
		}
	}
	.flex-1,
	.flex-2 {
		flex: 1;
		text-align: center;
		height: 112rpx;
		line-height: 112rpx;
		font-size: 28rpx;
		background: #F8F9FC;
		color: #1C1C1C;
		font-weight: bold;
	}
	
	.flex-2 {
		color: #626BF1;
	}
	.title {
		padding: 0 40rpx;
		height: 128rpx;
		line-height: 128rpx;
		border-bottom: 2rpx solid #EEF4F8;
		font-size: 26rpx;
		color: #959AA5;
	}
</style>
